<template>
	<div class="scroll">
		<h3>
			游侠<br />攻略
		</h3>
		<ul :class="{top}">
			<li v-for="it in scrollList" :key="it.id">
				<router-link to="/"><span></span>{{it.title}}</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:"SlideTxt",
		props:['propslidetxt'],
		data(){
			return{
				top:false,
				scrollList : []
			}
		},
		methods:{
			show(){
				//每隔两秒移动一条
				this.top=true
				//
				setTimeout(()=>{
					//500秒后:将数组的第一条加到最后
					this.scrollList.push(this.scrollList[0])
					//删除第一条
					this.scrollList.shift()
					//动画停止
					this.top=false
				},1000)
			}
		},
		mounted(){
			setInterval(this.show,2000)
		},
		watch:{
			propslidetxt(){
				this.scrollList=this.propslidetxt
			}
		}
	}
</script>

<style scoped>
	a{
		color: #000000;
		text-decoration: none;
	}
	.scroll{
		overflow: hidden;
		width: 100%;
		height: 1.3rem;
		/* 渐变是背景图片样式 */
		background-image: linear-gradient(#fbffaf,#ffffed)	
	}
	h3{
		height: 1.2rem;
		width: 15%;
		font-size: 0.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: gold;
		font-style: italic;
		font-weight: bold;
		float: left;
	}
	.scroll ul{
		float: left;
		width: 78%;
		margin-left: 0.4rem;
		height: 0.7rem;
	}
	/* 设置省略号(三个样式同时进行) */
	.scroll ul li{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 0.3rem;
		line-height: 0.6rem;
	}
	.scroll ul li span{
		display: inline-block;
		width: 0.2rem;
		height: 0.2rem;
		border-radius: 0.2rem;
		background: #FFD700;
		margin-right: 0.25rem;
	}
	.scroll .top{
		margin-top: -0.6rem;
		transition: all 1s;
		height: 1.7rem;
	}
</style>
